<template>
  <div class="pd-20 fetal-heart-order">
    <el-form :model="form"
             :inline="true">
      <el-form-item label="订单编号：">
        <el-input placeholder="请输入订单编号"
                  class="w-200"
                  clearable
                  @clear="handleQuery"
                  v-model="form.orderNum"></el-input>
      </el-form-item>
      <el-form-item label="订单时间：">
        <el-date-picker @change="handleQuery"
                        v-model="dateTime"
                        value-format="yyyy-MM-dd hh:mm:ss"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item label="服务名称：">
        <el-input placeholder="请输入服务名称"
                  class="w-200"
                  clearable
                  @clear="handleQuery"
                  v-model="form.serverName"></el-input>
      </el-form-item>
      <el-form-item label="所属医院：">
        <el-input placeholder="请输入所属医院"
                  class="w-200"
                  clearable
                  @clear="handleQuery"
                  v-model="form.hospitalName"></el-input>
      </el-form-item>
      <el-form-item label="订单状态：">
        <el-select v-model="form.orderType"
                   clearable
                   @change="handleQuery">
          <el-option v-for="item in statusList"
                     :key="item.id"
                     :label="item.label"
                     :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary"
                 @click="handleQuery">查 询</el-button>
      <el-button type="primary"
                 @click="exportFile">导 出</el-button>
    </el-form>
    <element-table class="mt-20"
                   v-loading="loading"
                   :columns="columns"
                   :data="tableData"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:price="{row}">
        <el-tag type="success">{{row.price}}</el-tag>
      </template>
    </element-table>

  </div>
</template>
<script>
  import elementTable from '@/base/ElementTable'
  export default {
    name: 'ECGOrder', // 胎心解读订单
    data () {
      return {
        loading: false,
        dialogVisible: false,
        columns: [
          {
            label: '订单编号',
            prop: 'orderNumber',
            width: 300,
            align: 'center',
            showToolTip: true
          },
          {
            label: '订单时间',
            prop: 'createTime',
            align: 'center',
            formatter: (row, cellValue) => {
              return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
            }
          },
          {
            label: '订单价格(元)',
            prop: 'money',
            align: 'center'
          },
          {
            label: '服务名称',
            prop: 'serviceName',
            align: 'center'
          },
          {
            label: '所属医院',
            prop: 'hospitalName',
            align: 'center'
          },
          {
            label: '订单状态',
            prop: 'orderStatus',
            formatter: (row, cellValue) => {
              // 1待支付 2接待中 3已支付 4使用中 5已取消 6退款中 7已退款 8已完结
              if (row.orderStatus === 1) return '待支付'
              if (row.orderStatus === 2) return '接待中'
              if (row.orderStatus === 3) return '已支付'
              if (row.orderStatus === 4) return '使用中'
              if (row.orderStatus === 5) return '已取消'
              if (row.orderStatus === 6) return '退款中'
              if (row.orderStatus === 7) return '已退款'
              if (row.orderStatus === 8) return '已完结'
            },
            align: 'center'
          },
          {
            label: '解读费用累计（元）',
            prop: 'price',
            align: 'center',
            isSlot: true
          },
          {
            label: '购买账号',
            prop: 'loginName',
            align: 'center'
          },
          {
            label: '监测人',
            prop: 'memberName',
            align: 'center'
          }
        ],
        tableData: [],
        pageTotal: 0,
        pageIndex: 1,
        pageSize: 10,

        dateTime: '',
        form: {
          orderNum: '',
          serverName: '',
          hospitalName: '',
          startTime: '',
          endTime: '',
          orderType: '',
          remoteType: 4,
          type: 2
        },
        statusList: [
          { id: 3, label: '已支付' },
          { id: 4, label: '已过期' },
          { id: 7, label: '已退款' },
          { id: 8, label: '已完结' }
        ]
      }
    },
    methods: {
      handleQuery (date){
        if (date) {
          this.form.startTime = date[0]
          this.form.endTime = date[1]
        } else {
          this.form.startTime = ''
          this.form.endTime = ''
        }
        this.pageIndex=1
        this.getList()
      },
      async getList () {
        this.loading = true
        const { data: res } = await this.post(this.api.fourHigh.getOrderList, {
          pageIndex: this.pageIndex - 1,
          pageSize: this.pageSize,
          ...this.form
        })
        if (res.code === '200') {
          this.loading = false;
          let arr = Object.keys(res.object); // 后台太坑,没数据时,给我返回一个空对象,应该返回空数组
          this.tableData = arr.length > 0 ? res.object : [];
          this.pageTotal = res.totalNum
        }
      },
      // 时间选择
      changeDateTime (date) {
        if (date) {
          this.form.startTime = date[0]
          this.form.endTime = date[1]
        } else {
          this.form.startTime = ''
          this.form.endTime = ''
        }
        this.getList()
      },

      // 分页
      handleChangePage (page) {
        this.pageIndex = page
        this.getList();
      },
      // 详情页分页
      handleChangeDetailPage (page) {
        this.pageIndexDetail = page
        this.getList();
      },
      // 导出文件
      exportFile () {
        if (this.tableData.length == 0) {
          this.$message.error('没有数据可导出!')
          return false
        }
        let url = this.api.fetaHeart.exportOrderList
        this.commonFunction.exportFileData(this.form, url, '胎心解读订单', '.xlsx')
      }
    },
    created () {
      this.getList()
    },
    components: {
      'element-table': elementTable
    }
  }
</script>
<style lang="scss" scoped>
</style>
